<template>
	<view class="container tui-page__bd">
		<!-- #ifndef H5 -->
		<tui-navigation-bar @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" title="Thor UI"
			backgroundColor="#f8f8f8" color="#333"></tui-navigation-bar>
		<!-- #endif -->
		<view class="tui-my_header">
			<view class="tui-userinfo__box" :style="{ paddingTop: height + 2 + 'px' }">
				<view class="tui-desc__box">
					<view class="tui-name">Thor UI</view>
					<view class="tui-intro">Everything is the best arrangement</view>
				</view>
				<view class="tui-avatar__box">
					<image class="tui-avatar" :src="userAvatar"></image>
					<image class="tui-edit-ic" src="/static/images/my/icon_edit_3x.png" @tap="changeAvatar"></image>
				</view>
			</view>
			<view class="tui-statistics__box">
				<view class="tui-statistics__item">
					<view class="tui-count">{{ statistics.download || '60k+' }}</view>
					<view class="tui-title">download</view>
				</view>
				<view class="tui-statistics__item">
					<view class="tui-count">{{ statistics.user || '30k+' }}</view>
					<view class="tui-title">user</view>
				</view>
				<view class="tui-statistics__item">
					<view class="tui-count">{{ statistics.star || '1.6k+' }}</view>
					<view class="tui-title">star</view>
				</view>
			</view>
			<view class="tui-vip__box">
				<view class="tui-vip__bar">
					<view>
						<image class="tui-vip__ic" src="/static/images/my/vip_ic_3x.png" mode="widthFix"></image>
						<view class="tui-vip__desc">More benefits for members</view>
					</view>
					<tui-button width="162rpx" height="60rpx" :size="26" shape="circle" @click="href(1)">Member
					</tui-button>
				</view>
			</view>
		</view>
		<view class="tui-menu__box">
			<view class="tui-menu__list">
				<view class="tui-menu__item" @tap="href(2)">
					<image src="/static/images/my/mine_icon_share_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">好友分享</text>
				</view>
				<view class="tui-menu__item" @tap="href(3)">
					<image src="/static/images/my/mine_icon_log_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">版本介绍</text>
				</view>
				<view class="tui-menu__item" @tap="href(4)">
					<image src="/static/images/my/mine_icon_github_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">开源地址</text>
				</view>
				<view class="tui-menu__item" @tap="href(5)">
					<image src="/static/images/my/mine_icon_about_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">关于我们</text>
				</view>
			</view>
			<view class="tui-cell-header">More</view>
			<view class="tui-menu__list">
				<view class="tui-menu__item" @tap="reward">
					<image src="/static/images/my/mine_icon_reward_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">赞赏作者</text>
				</view>
				<view class="tui-menu__item" @tap="href(1)">
					<image src="/static/images/my/mine_icon_member_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">会员权益</text>
				</view>
				<view class="tui-menu__item" @tap="href(6)">
					<image src="/static/images/my/mine_icon_help_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">帮助中心</text>
				</view>
				<view class="tui-menu__item" @tap="feedback">
					<button open-type="feedback" class="tui-btn__opentype"></button>
					<image src="/static/images/my/mine_icon_feedback_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">反馈建议</text>
				</view>
				<view class="tui-menu__item" @tap="href(7)">
					<image src="/static/images/my/mine_icon_hezuo_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">我要合作</text>
				</view>
				<view class="tui-menu__item" @tap="href(8)">
					<image src="/static/images/my/mine_icon_welfare_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">福利专享</text>
				</view>
				<view class="tui-menu__item" @tap="href(9)">
					<image src="/static/images/my/mine_icon_applets_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">开源组件</text>
				</view>
				<view class="tui-menu__item" @tap="href(10)">
					<image src="/static/images/my/mine_icon_app_3x.png" class="tui-menu__ic"></image>
					<text class="tui-menu__title">付费成品</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				opacity: 0,
				height: 20,
				scrollTop: 0.5,
				statistics: {},
				sweixin: null
			};
		},
		computed: mapState(['userAvatar']),
		onLoad() {
			this.tui
				.request('/Static/statistics.json?v=2', 'Get', {}, false, false, true)
				.then(res => {
					this.statistics = res || {};
				})
				.catch(res => {});
			// #ifdef APP-PLUS
			plus.share.getServices(s => {
				for (let item of s) {
					if (item.id == 'weixin') {
						this.sweixin = item;
					}
				}
			});
			// #endif
		},
		methods: {
			initNavigation(e) {
				this.opacity = e.opacity;
				this.height = e.height;
			},
			opacityChange(e) {
				this.opacity = e.opacity;
			},
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths[0];
						this.tui.href('/pages/my/avatar/avatar?src=' + tempFilePaths);
					}
				});
			},
			feedback() {
				// #ifdef H5
				location.href = 'https://www.thorui.cn/';
				// #endif
				// #ifdef MP-ALIPAY
				uni.navigateTo({
					url: '/pages/my/feedback/feedback'
				});
				// #endif
			},
			reward: function() {
				uni.previewImage({
					urls: ['https://thorui.cn/img/reward.jpg']
				});
			},
			href(index) {
				let url = '';
				if (index == 9) {
					// #ifdef MP-WEIXIN
					wx.navigateToMiniProgram({
						appId: 'wxb6a98ca343f57a38'
					});
					// #endif

					// #ifndef  MP-WEIXIN
					if (this.sweixin) {
						this.sweixin.launchMiniProgram({
							id: 'gh_0c07a8c02dac'
						});
					} else {
						uni.previewImage({
							urls: ['https://thorui.cn/img/applets.jpg']
						});
					}
					// #endif
					return;
				}
				switch (index) {
					case 1:
						url = '/pages/my/member/member';
						break;
					case 2:
						url = '/pages/my/share/share';
						break;
					case 3:
						url = '/pages/my/edition/edition';
						break;
					case 4:
						url = '/pages/my/doc/doc';
						break;
					case 5:
						url = '/pages/my/about/about';
						break;
					case 6:
						url = '/pages/my/help/help';
						break;
					case 7:
						url = '/pages/my/cooperate/cooperate';
						break;
					case 8:
						url = '/pages/my/welfare/welfare';
						break;
					case 10:
						url = '/pages/my/product/product';
						break;
					default:
						break;
				}
				this.tui.href(url);
			}
		},
		onPageScroll(e) {
			// #ifndef H5
			this.scrollTop = e.scrollTop;
			// #endif
		},
		onShareAppMessage: function(e) {
			return {
				title: 'ThorUI示例'
			};
		}
	};
</script>

<style>
	.tui-my_header {
		width: 100%;
		/* #ifdef H5 */
		height: 520rpx;
		/* #endif */
		/* #ifndef H5 */
		height: 600rpx;
		/* #endif */

		background: linear-gradient(to right, #f1f3f7, #f1f3f7, #fff4fc);
		position: relative;
	}

	.tui-userinfo__box {
		width: 100%;
		padding: 120rpx 30rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-name {
		font-size: 48rpx;
		font-weight: 700;
		color: #152338;
		width: 500rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-intro {
		font-size: 26rpx;
		line-height: 30rpx;
		color: #aeafb7;
		width: 500rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top: 20rpx;
	}

	.tui-avatar__box {
		position: relative;
		flex-shrink: 0;
	}

	.tui-avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}

	.tui-edit-ic {
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		right: 0;
		bottom: 10rpx;
		overflow: visible;
	}

	.tui-edit-ic::after {
		content: '';
		width: 100%;
		height: 100%;
		border: 1rpx solid #fff;
		position: absolute;
		left: -1rpx;
		top: -1rpx;
		border-radius: 50%;
		z-index: 2;
	}

	.tui-statistics__box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
	}

	.tui-statistics__item {
		padding-right: 80rpx;
	}

	.tui-count {
		font-size: 40rpx;
		font-weight: 500;
		color: #152338;
	}

	.tui-title {
		font-size: 26rpx;
		line-height: 28rpx;
		color: #aeafb7;
		padding-top: 12rpx;
	}

	.tui-vip__box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.tui-vip__bar {
		width: 100%;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		background-color: #383f54;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tui-vip__ic {
		width: 80rpx;
		height: 30rpx;
	}

	.tui-vip__desc {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(255, 255, 255, 0.7);
		padding-top: 4rpx;
	}

	.tui-menu__box {
		width: 100%;
		padding: 72rpx 30rpx 100rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-menu__list {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.tui-menu__item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 72rpx;
		position: relative;
	}

	.tui-menu__ic {
		width: 64rpx;
		height: 64rpx;
	}

	.tui-menu__title {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 28rpx;
		color: #4e4d52;
	}

	.tui-cell-header {
		width: 100%;
		padding-bottom: 72rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 34rpx;
		font-weight: 600;
		color: #152338;
	}
</style>
